<template>
  <div class="app-container">
    <div class="filter-container">

      <el-select
        v-model="listQuery.peerId"
        placeholder="分公司"
        clearable
        style="width: 190px"
        class="filter-item search-input"
        ref="peerSelect"
        @change="handleFilter"
      >
        <el-option v-for="item in peerOptions" :key="item.peerId" :label="item.name" :value="item.peerId" />
      </el-select>
      <!-- <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button> -->
    </div>

    <el-table
       v-show="topTableShow"
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <!--      <el-table-column label="线路ID" width="80px" align="center">-->
      <!--        <template slot-scope="{row}">-->
      <!--          <span>{{ row.ID }}</span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column :label="' '+ peerName" align="center">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="库存" align="center">
        <template slot-scope="{row}">
          <span v-html=" row.stock"></span>
        </template>
      </el-table-column>
    </el-table>
    <br>

    <el-table
       v-show="topTableShow"
      :key="tableKey + '-'"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <!--      <el-table-column label="线路ID" width="80px" align="center">-->
      <!--        <template slot-scope="{row}">-->
      <!--          <span>{{ row.ID }}</span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column label="线路" align="center">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="出发城市" align="center">
        <template slot-scope="{row}" >
              <span :key="startCity.value" v-for="startCity in startCityOptions"
               v-html="startCity.value == row.startCity ? startCity.label : ''">{{ row.startCity }}</span>
        </template>
      </el-table-column>
      <el-table-column label="库存" align="center">
        <template slot-scope="{row}">
          <div>
            <el-input
              v-model="row.upStock" @change="handleInput(row)" :value="row.upStock">
              <el-button slot="prepend" @click="del(row)"><i class="el-icon-minus"></i></el-button>
              <el-button slot="append" @click="add(row)"><i class="el-icon-plus"></i></el-button>
            </el-input>
          </div>
        </template>

        <!-- <template slot-scope="{row}">
          <span>{{ row.stock }}</span>
        </template> -->
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button size="small" type="primary"  @click="handleUpdate(row)" > 确定</el-button>
        </template>
      </el-table-column>
    </el-table>


  </div>
</template>

<script>
import { list , update} from '@/api/writeInventory'
import { listSelection , listStartCity} from '@/api/selectOptions'
import Pagination from '@/components/Pagination'
import { toSelectOptions } from '@/utils/common'


export default {
  components: {
    Pagination
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        peerId : undefined //分公司id
      },
      topTableShow : false ,//上列表是否展示
      temp : {
        id : '',
        currentStock: 0,
        stock: 0
      },
      peerName : undefined,
      startCityOptions: undefined,
      peerOptions: undefined,
    }
  },
  created() {
    this.getPeerOptions()
    this.getList()
    this.getStartCityOptions()
  },
  methods: {
    getList() {
      this.listLoading = true
      list(this.listQuery).then(response => {
        var data = response.data;
        for(let i = 0 ; i < data.length ; i++){
          data[i].upStock = data[i].stock;
        }
        this.list = data
        this.total = response.total
        this.listLoading = false
      })
    },
    getStartCityOptions() {
      listStartCity().then(response => {
        this.startCityOptions = toSelectOptions(response.data)
      })
    },
    getPeerOptions() {
      listSelection().then(response => {
        this.peerOptions = response.data
      })
    },
    handleFilter() {
      const peerId = this.listQuery.peerId;
      if(peerId != '' && peerId != undefined){
        let peer = {};
        peer = this.peerOptions.find((item)=>{//这里的userList就是上面遍历的数据源
          return item.peerId === peerId;//筛选出匹配数据
        });
        this.peerName = peer.name + "-核销库存";
        this.getList()
        this.topTableShow = true;
      }else{
        this.topTableShow = false;
      }
    },
    handleUpdate(row) {
      if(row.stock == row.upStock){
        this.$notify({
            title: '提示',
            message: '数据未作任何修改',
            type: 'warning'
        })
        return false;
      }
      this.temp = {
        ID : row.ID,
        currentStock : parseInt(row.stock),
        stock : parseInt(row.upStock)
      }
      update(this.temp).then(response => {
          if(response.msg != "成功"){
            this.$alert(response.msg, "提示", {
              confirmButtonText: "确定",
              type: 'warning',
              callback: action => {
                this.getList()
              }
            });
          }else{
             this.$notify({
                  title: '提示',
                  message: '修改成功',
                  type: 'success'
              })
               this.getList()
          }
      })
    },
    handleInput(row){
      const regex = /^[0-9]*$/;
      const bool = regex.test(row.upStock);
      if(!bool){
        row.upStock = row.stock
        return false;
      }
      if(parseInt(row.stock) > parseInt(row.upStock)){
        this.$notify({
            title: '提示',
            message: '修改库存时只能大于当前页面库存',
            type: 'error'
        })
        row.upStock = row.stock
        return false;
      }
    },
    add:function(row  , stock){
        if(typeof row.upStock=='string'){
          row.upStock=parseInt(row.upStock);
        };
        row.upStock+=1;
      },
    del:function(row){
      if(row.stock == row.upStock){
        this.$notify({
            title: '提示',
            message: '修改库存时只能大于当前页面库存',
            type: 'error'
        })
        return false;
      }
      if(typeof row.upStock=='string'){
        row.upStock=parseInt(row.upStock);
      };
      if(row.upStock>0){
        row.upStock-=1;
      }
    },
  }
}
</script>

<style>
.search-input {
  width: 150px;
  margin-right: 15px;
}

</style>
